<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>VirtualDOM</title>
  </head>

  <body>
    <!-- 真实DOM -->
    <div id="virtual-dom">
      <p>Real DOM</p>
      <ul id="list">
        <li class="item">Item 1</li>
        <li class="item">Item 2</li>
        <li class="item">Item 3</li>
      </ul>
      <div>Hello World</div>
    </div>
    <script type="module">
      import el from "./js/16_VirtualDOM/element.js";

      var ul = el("div", { id: "virtual-dom" }, [
        el("p", {}, ["Virtual DOM"]),
        el("ul", { id: "list" }, [
          el("li", { class: "item" }, ["Item 1"]),
          el("li", { class: "item" }, ["Item 2"]),
          el("li", { class: "item" }, ["Item 3"]),
        ]),
        el("div", {}, ["Hello World"]),
      ]);
      const ulRoot = ul.render();
      if (ulRoot) {
        document.body.appendChild(ulRoot);
      }

      var ul1 = el("div", { id: "virtual-dom" }, [
        el("p", {}, ["Virtual DOM"]),
        el("ul", { id: "list" }, [
          el("li", { class: "item" }, ["Item 1"]),
          el("li", { class: "item" }, ["Item 2"]),
          el("li", { class: "item" }, ["Item 3"]),
        ]),
        el("div", {}, ["Hello World"]),
      ]);
      var ul2 = el("div", { id: "virtual-dom" }, [
        el("p", {}, ["Virtual DOM"]),
        el("ul", { id: "list" }, [
          el("li", { class: "item" }, ["Item 21"]),
          el("li", { class: "item" }, ["Item 23"]),
        ]),
        el("p", {}, ["Hello World"]),
      ]);
      var patches = diff(ul1, ul2);
      console.log("patches:", patches);
    </script>
  </body>
</html>
